<template>
  <Card shadow>
    <div>
      <div class="message-page-con message-category-con">
        <Menu width="auto" active-name="unread" @on-select="handleSelect">
          <MenuItem name="unread">
            <span class="category-title">未读消息 </span>
            <Badge
              style="margin-left: 10px"
              :count="messageUnreadCount"
            ></Badge>
          </MenuItem>
          <MenuItem name="readed">
            <span class="category-title">已读消息 </span>
            <Badge
              style="margin-left: 10px"
              class-name="gray-dadge"
              :count="messageReadedCount"
            ></Badge>
          </MenuItem>
          <MenuItem name="trash">
            <span class="category-title">回收站 </span>
            <Badge
              style="margin-left: 10px"
              class-name="gray-dadge"
              :count="messageTrashCount"
            ></Badge>
          </MenuItem>
        </Menu>
      </div>
      <div class="message-page-con message-list-con">
        <Spin fix v-if="listLoading" size="large"></Spin>
        <Menu
          width="auto"
          active-name=""
          :class="titleClass"
          @on-select="handleView"
        >
          <MenuItem
            v-for="item in messageList"
            :name="item.msg_id"
            :key="`msg_${item.msg_id}`"
          >
            <div>
              <p class="msg-title">{{ item.title }}</p>
              <Badge status="default" :text="item.create_time" />
              <Button
                style="float: right; margin-right: 20px"
                :style="{
                  display: item.loading ? 'inline-block !important' : '',
                }"
                :loading="item.loading"
                size="small"
                :icon="currentMessageType === 'readed' ? 'md-trash' : 'md-redo'"
                :title="currentMessageType === 'readed' ? '删除' : '还原'"
                type="text"
                v-show="currentMessageType !== 'unread'"
                @click.native.stop="removeMsg(item)"
              ></Button>
            </div>
          </MenuItem>
        </Menu>
      </div>
      <div class="message-page-con message-view-con">
        <Spin fix v-if="contentLoading" size="large"></Spin>
        <div class="message-view-header">
          <h2 class="message-view-title">{{ showingMsgItem.title }}</h2>
          <time class="message-view-time">
            {{ showingMsgItem.create_time }}
          </time>
        </div>
        <div v-html="messageContent"></div>
      </div>
    </div>
  </Card>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
const listDic = {
  unread: "messageUnreadList",
  readed: "messageReadedList",
  trash: "messageTrashList",
};
export default {
  name: "message_page",
  data() {
    return {
      listLoading: true,
      contentLoading: false,
      currentMessageType: "unread",
      messageContent: "",
      showingMsgItem: {},
    };
  },
  computed: {
    ...mapState({
      messageUnreadList: (state) => state.user.messageUnreadList,
      messageReadedList: (state) => state.user.messageReadedList,
      messageTrashList: (state) => state.user.messageTrashList,
      messageList() {
        return this[listDic[this.currentMessageType]];
      },
      titleClass() {
        return {
          "not-unread-list": this.currentMessageType !== "unread",
        };
      },
    }),
    ...mapGetters([
      "messageUnreadCount",
      "messageReadedCount",
      "messageTrashCount",
    ]),
  },
  methods: {
    ...mapActions([
      "getContentByMsgId",
      "getMessageList",
      "hasRead",
      "removeReaded",
      "restoreTrash",
    ]),
    stopLoading(name) {
      this[name] = false;
    },
    handleSelect(name) {
      this.currentMessageType = name;
    },
    handleView(msg_id) {
      this.contentLoading = true;
      this.getContentByMsgId({ msg_id })
        .then((content) => {
          this.messageContent = content;
          const item = this.messageList.find((item) => item.msg_id === msg_id);
          if (item) this.showingMsgItem = item;
          if (this.currentMessageType === "unread") this.hasRead({ msg_id });
          this.stopLoading("contentLoading");
        })
        .catch(() => {
          this.stopLoading("contentLoading");
        });
    },
    removeMsg(item) {
      item.loading = true;
      const msg_id = item.msg_id;
      if (this.currentMessageType === "readed") this.removeReaded({ msg_id });
      else this.restoreTrash({ msg_id });
    },
  },
  mounted() {
    this.listLoading = true;
    // 请求获取消息列表
    this.getMessageList()
      .then(() => this.stopLoading("listLoading"))
      .catch(() => this.stopLoading("listLoading"));
  },
};
</script>

<style lang="less">
.message-page {
  &-con {
    height: ~"calc(100vh - 176px)";
    display: inline-block;
    vertical-align: top;
    position: relative;
    &.message-category-con {
      border-right: 1px solid #e6e6e6;
      width: 200px;
    }
    &.message-list-con {
      border-right: 1px solid #e6e6e6;
      width: 230px;
    }
    &.message-view-con {
      position: absolute;
      left: 446px;
      top: 16px;
      right: 16px;
      bottom: 16px;
      overflow: auto;
      padding: 12px 20px 0;
      .message-view-header {
        margin-bottom: 20px;
        .message-view-title {
          display: inline-block;
        }
        .message-view-time {
          margin-left: 20px;
        }
      }
    }
    .category-title {
      display: inline-block;
      width: 65px;
    }
    .gray-dadge {
      background: gainsboro;
    }
    .not-unread-list {
      .msg-title {
        color: rgb(170, 169, 169);
      }
      .ivu-menu-item {
        .ivu-btn.ivu-btn-text.ivu-btn-small.ivu-btn-icon-only {
          display: none;
        }
        &:hover {
          .ivu-btn.ivu-btn-text.ivu-btn-small.ivu-btn-icon-only {
            display: inline-block;
          }
        }
      }
    }
  }
}
</style>